<template>
  <header>
    <div class="nav-container">
      <!-- LOGO -->
      <div class="logo">
        <a href="/"><img src="@/assets/logo.png" alt="Sakura Pharma"></a>
      </div>

      <!-- 导航菜单 -->
      <div class="mobile-nav" v-if="isMobile">
  <div @click="toggleMenu" :class="{ 'active': showMenu }" class="menu-btn">
    <span v-if="!showMenu">&#9776;</span>
    <span v-else class="close-icon">×</span>
  </div>

  <div v-show="showMenu" class="mobile-menu-overlay">
    <ul class="nav-links mobile-fullscreen">
      <li><router-link to="/about" @click="closeMenu">桜倉製薬について</router-link></li>
      <li><router-link to="/project" @click="closeMenu">商品ブランド</router-link></li>
      <li><router-link to="/service" @click="closeMenu">サービス</router-link></li>
      <li><router-link to="/company" @click="closeMenu">会社情報</router-link></li>
      <li><router-link to="/news" @click="closeMenu">新着ニュース</router-link></li>
      <li><router-link to="/recruit" @click="closeMenu">採用情報</router-link></li>
     
    </ul>
  </div>
</div>


<!-- 桌面菜单 -->
<nav v-else>
  <ul class="nav-links">
    <li><router-link to="/about">桜倉製薬について</router-link></li>
    <li><router-link to="/project">商品ブランド</router-link></li>
    <li><router-link to="/service">サービス</router-link></li>
    <li><router-link to="/company">会社情報</router-link></li>
    <li><router-link to="/news">新着ニュース</router-link></li>
    <li><router-link to="/recruit">採用情報</router-link></li>
  </ul>
</nav>

<!-- 移动菜单 -->
<div v-show="showMenu" class="mobile-menu-overlay">
  <ul class="nav-links mobile-fullscreen">
    <li><router-link to="/about" @click="closeMenu">桜倉製薬について</router-link></li>
    <li><router-link to="/project" @click="closeMenu">商品ブランド</router-link></li>
    <li><router-link to="/service" @click="closeMenu">サービス</router-link></li>
    <li><router-link to="/company" @click="closeMenu">会社情報</router-link></li>
    <li><router-link to="/news" @click="closeMenu">新着ニュース</router-link></li>
    <li><router-link to="/recruit" @click="closeMenu">採用情報</router-link></li>
  </ul>
</div>
      <!-- CONTACT 按钮 -->
      <div class="contact">
        <router-link to="/contact" style="text-decoration: none">
          <el-icon class="contact-icon"><Promotion /></el-icon>          
          CONTACT
        </router-link>
      </div>
    </div>
  </header>
</template>

<script>

import { Promotion } from '@element-plus/icons-vue'
import { ref, onMounted, onUnmounted } from 'vue'




export default {
  name: 'NavBar',
  components: {
    Promotion
  },
  setup() {
    const isMobile = ref(false)
    const showMenu = ref(false)

    const checkScreenSize = () => {
      isMobile.value = window.innerWidth < 768
    }

    const toggleMenu = () => {
  showMenu.value = !showMenu.value
  if (showMenu.value) {
    document.body.style.overflow = 'hidden'
    document.documentElement.style.overflow = 'hidden'
  } else {
    document.body.style.overflow = ''
    document.documentElement.style.overflow = ''
  }
}

const closeMenu = () => {
  showMenu.value = false
  document.body.style.overflow = ''
  document.documentElement.style.overflow = ''
}


onMounted(() => {
  checkScreenSize()
  window.addEventListener('resize', checkScreenSize)
})
onUnmounted(() => {
  window.removeEventListener('resize', checkScreenSize)
})

    return { isMobile, showMenu, toggleMenu , closeMenu}
  }
}
</script>

<style scoped>
/* 头部背景色 */
header {
  background-color: #fef7ed;
  padding: 15px 0;
}

/* 顶部导航栏容器 */
.nav-container {
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5%;
  gap: 30px;
  position: relative;
}

/* 让导航栏的宽度适应不同屏幕 */
nav {
  width: 30%;
}

.logo img {
  width: 160px;
}


/* 修改导航菜单样式 */
.nav-links {
  display: flex;
  justify-content: space-between;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 25px;
  white-space: nowrap; /* 禁止换行 */
  
}

.nav-links li {
  font-weight: 500;
  font-size: 16px;
  flex-shrink: 0; /* 禁止项目缩小 */
}

.nav-links li a {
  color: #666;
  text-decoration: none;
  transition: 0.3s;
  font-family: 'Hiragino Mincho Pro', 'MS Mincho', 'Ming', serif; /* 更新字体设置 */
  font-size: 16px; 
  font-weight: 600;
}

.nav-links li a:hover {
  color: #f8a80f;
}

.contact {
  padding-left: 30px;
  display: flex;
  align-items: center;
}

.contact a {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  background-color: #ee9089;
  color: white;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.contact a:hover {
  background-color: #e07d75;
}

.contact-icon svg {
  width: 28px;
  height: 28px;
  margin-right: 10px;
  vertical-align: middle;
}



/* 隐藏默认的导航链接，并显示菜单按钮 */
@media (max-width: 768px) {
  .logo img {
    height: auto;
  }
  .mobile-nav {
    position: relative;
  }

  .menu-btn {
    display: block;
    cursor: pointer;
    font-size: 24px;
  }

  .nav-links {
    display: flow;
    position: absolute;
    right: 0;
    top: 0px;
    flex-direction: column;
    padding: 10px 20px;
    border-radius: 8px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    gap: 12px;
    z-index: 1000;
  }

  .nav-links li {
    font-size: 14px;
    text-align: center;
    white-space: nowrap; /* 禁止换行 */
    padding: 24px 0;
  }

  .contact {
    margin-top: 0; /* 移除顶部间距 */
    padding-left: 0;
  }
}
.contact a {
  padding: 4px 8px; /* 移动端更小的内边距 */
  font-size: 12px;
  }
  
  .contact-icon svg {
    width: 16px;
    height: 16px;
    margin-right: 5px;
  }

  /* 淡入淡出动画 */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s ease;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}

/* 菜单按钮样式 */
.menu-btn {
  font-size: 28px;
  cursor: pointer;
  z-index: 2001;
  position: relative;
}

.close-btn {
  font-size: 32px;
  color: white;
}

/* 全屏菜单的背景容器 */

/* 移除或注释掉这部分 */
/*
body.menu-open,
html.menu-open {
  overflow: hidden;
  height: 100%;
}
*/

.mobile-menu-overlay {
  position: fixed;
  top: 60px; /* 留出 header 高度 */
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
              url('@/assets/AdobeStock_280540689.jpg') center/cover no-repeat;
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 菜单项 */
.mobile-fullscreen {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
  z-index: 1000;
  width: 100vw;
  height: 100vh;
}

.mobile-fullscreen li {
  color: white;
  font-size: 20px;
  margin: 10px 0;
}

.mobile-fullscreen li a {
  color: white;
  text-decoration: none;
}

.mobile-fullscreen li a:hover {
  text-decoration: underline;
}

/* 关闭按钮样式 */
.close-icon {
  font-size: 28px;
  color: black;
}


</style>

<style scoped>
/* 新增固定定位样式 */
header {
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000; /* 确保导航栏在最上层 */
  /* 其他原有样式 */
}

/* 调整内容区域上边距 */
.content-wrap {
  margin-top: 60px; /* 与导航栏高度一致 */
}
</style>
